<template>
  <div class="comments">
      <h3>发表评论:</h3>
      <textarea placeholder="请输入要评论的内容" maxlength="120" class="comments_textarea" v-model="container"></textarea>
      <mt-button type="primary" size="large" @click = "upload_comments">提交评论</mt-button>
      <div class="cmt_list">
          <div class="cmt_item" v-for="item in comments_list" :key="item.uploadtime">
              <div class="cmt_title">
                  第{{item.floor}}楼&nbsp;&nbsp;用户：{{item.user}} &nbsp;&nbsp;发表时间：{{item.uploadtime}}
              </div>
              <div class="cmt_body">
                {{item.container}}
              </div>
          </div>
      </div>
      <mt-button type="danger" size="large" plain @click = "show_more">加载更多</mt-button>
  </div>
</template>

<script>
export default {
    data(){
        return {
            type:'',
            id:"",
            container:'',
            user:'匿名用户',
            comments_list :[]
        }
    },
    created(){
        this.show_more();
    },
    props:['cmt_path','cmt_id'],
    methods:{
        upload_comments(){//上传当前页面的评论信息
            var path_arr = this.cmt_path.split('/');
            this.type = path_arr[path_arr.length-2];//获取到当前页面路径前面的分类名称
            this.id = this.cmt_id;
            var time = this.$moment(new Date()).format('YYYY/MM/DD HH:mm:ss');
            var obj = {};
            obj.type = this.type;
            obj.id = this.id;
            obj.container = this.container;
            obj.time = time;
            obj.user = this.user;
            this.$http.post("http://localhost:3000/cmtupload",obj,{emulateJSON:true}).then((data)=>{
                 this.show_more();
                 this.container = "";
            })
        },
        show_more(){//展示更多的评论信息
            var path_arr = this.cmt_path.split('/');
            this.type = path_arr[path_arr.length-2];//获取到当前页面路径前面的分类名称
            this.id = this.cmt_id;
            var obj = {};
            obj.type = this.type;
            obj.id = this.id;
            this.$http.post("http://localhost:3000/showcmt",obj,{emulateJSON:true}).then((data)=>{
                this.comments_list = data.body;
                this.$store.commit('setcomments_count',this.comments_list.length)
            })
        }
    }
}
</script>

<style lang = 'less' scoped>
    .comments{
        margin-top: 5px;
        h3{
            margin: 0;
            padding: 5px 4px;
            font-size: 18px;
            border-top: 1px solid black;
        }
        >.comments_textarea{
            margin: 0;
            font-size: 14px;
        }
        .cmt_list{

            .cmt_item{
                font-size: 13px;
                .cmt_title{
                    background-color: rgb(170, 167, 167);
                    padding-left: 10px;
                }
                .cmt_body{
                    height: 24px;
                    line-height: 24px;
                    padding-left: 20px;
                }
            }
        }
    }
</style>